<div class="row">
	<div class="col-xs-12">
		<div class="box">
			<div class="box-header">
				<h3 class="box-title">日志管理</h3>
				<div class="box-tools">
					<div class="input-group input-group-sm" style="width: 350px;">
						<input type="text" name="table_search" id="searchNameId"
							class="form-control pull-right" placeholder="用户名">

						<div class="input-group-btn">
							<button type="button" class="btn btn-default btn-search">
								<i class="fa fa-search"></i>
							</button>
							<button type="button" class="btn btn-default btn-delete">删除</button>
						</div>
					</div>
				</div>
			</div>
			<!-- /.box-header -->
			<div class="box-body table-responsive no-padding">
				<table class="table table-hover">
					<thead>
						<tr>
							<th><input type="checkbox" id="checkAll">全选</th>
							<th>用户名</th>
							<th>操作</th>
							<th>请求方法</th>
							<th>请求参数</th>
							<th>IP</th>
							<th>执行时长</th>
						</tr>
					</thead>
					<tbody id="tbodyId">
						<tr>
							<td colspan="7">数据正在加载中...</td>
						</tr>
					</tbody>
				</table>
			</div>
			<div id="pageId" class="box-footer clearfix" dm="100" th:insert="~{common/page.html::#A}">
<!-- 			th:insert=~{common/page.html} -->

			</div>
		</div>
		<!-- /.box -->
	</div>
</div>
<script type="text/javascript">
//当日志列表页面加载完成后 加载分页页面
	$(function(){
		
// 		$("#pageId").load("doPageUI",function(){
// 			//异步加载用户行为日志信息
//		doGetObjects();
// 		});
		//上面写法的简化形式
//		$("#pageId").load("doPageUI",doGetObjects);
		doGetObjects();
		//查询事件注册
		//on函数为jquery中的一个事件注册函数
		//on函数语法:$("选择器").on("事件","子元素选择器",数据)
		$(".input-group-btn")
		.on("click",".btn-search",doQueryObjects)
		.on("click",".btn-delete",doDeleteObjects);
		//全选事件注册(一般与状态相关的事件会用change)
		$("#checkAll").change(dochangeTableBodyCheckboxState)
		//tbody中checkbox对象的事件注册
		
		$("#tbodyId")
		.on("change","input:checkbox",dochangeTableHeadCheckboxState)
	});
	//基于tbody中checkbox对象的状态修改thead中checkbox对象状态
	function dochangeTableHeadCheckboxState(){
		//1.设定默认状态值
		  var flag=true;
		  //2.迭代所有tbody中的checkbox值并进行与操作
		  $("#tbodyId input[type='checkbox']")
		  .each(function(){
			  flag=flag&$(this).prop("checked")
		  });
		  //3.修改全选元素checkbox的值为flag
		  $("#checkAll").prop("checked",flag);

	}
	//修改tbody中的对象的状态
	function dochangeTableBodyCheckboxState(){
		//1.获取全选checjbox对象的状态
		var flag=$("#checkAll").prop("checked")
		//2.设置tbody中checkbox对象的状态的checked属性的值
		$("#tbodyId input[type=checkbox]").prop("checked",flag);
	}
	//获取选中记录的id
	function doGetCheckedIds(){
		var idArray=[];//new Array();
		$("#tbodyId input[type=checkbox]")
		.each(function(){
			//$(this)代表input类型为checkbox的对象
			if($(this).prop("checked")){//选中这个布尔表达式为true
				idArray.push($(this).val())//将选中的checkbox对象的值写入数组
			}
		});
		return idArray;
	}
	//向服务端异步请求执行删除操作
	function doDeleteObjects(){
		//1.定义请求参数
		//1.1获取用户选中记录的id值,并将其存储到数组
		var idArray=doGetCheckedIds();
		//1.2判断是否选中
		if(!idArray||idArray.length==0){
			alert("请先选择")
			return;
		}
		//1.3 给出提示确定删除吗
		if(!confirm("确定删除吗"))return;
		//1.4构建请求参数
		var params={"ids":idArray.toString()};//将ids转换成字符串
		console.log(params)
		//2.定义请求url
		var url="log/doDeleteObjects";
		//3.发送请求
		$.post(url,params,function(result){
			
			if(result.state==1){
		//		debugger
				alert(result.message);
				doRefreshAfterDeleteOK();
				
			}else{
				alert(result.message);
			}
		})
	}
//	删除成功以后的刷新
	function doRefreshAfterDeleteOK(){
	//页码值的减减操作 回到上一级需要满足的条件
	//1)thead中checkbox的状态为全选
	var allChecked=$("#checkAll").prop("checked");
	//2)当前页码值是最后一页并且不是第一页
//	 $("#pageId").data("pageCount",pageCount);
	var pageCurrent=$("#pageId").data("pageCurrent")
	var pageCount=$("#pageId").data("pageCount")
	if(allChecked&&pageCurrent==pageCount&&pageCurrent>1){
		pageCurrent--;
		$("#pageId").data("pageCurrent",pageCurrent);
		
	}
	doGetObjects();
}
	
	//处理查询按钮事件
	function doQueryObjects(){
// 		1.定义参数方法1
		$("#pageId").data("pageCurrent",1)
// 		2.定义参数url
// 		3.发送异步请求
		doGetObjects()
	}
	//开启Ajax异步任务,按条件加载用户行为日志信息
	function doGetObjects(){
		var pageCurrent=$("#pageId").data("pageCurrent");
		if(!pageCurrent)pageCurrent=1; //pageCurrent没有值时默认是1
		//1.定义请求参数
//		var params="pageCurrent=1";//定义参数的方式1
		var params={"pageCurrent":pageCurrent}//定义参数的方式2 当前页的页码值
		
		//获取用户输入的用户名
		//想json格式的js对象中动态添加key value
		var name=$("#searchNameId").val()
		
		if(name)params.username=name //这里key接收的参数与服务齐参数名相同
		//2.定义url
		var url="/log/doFindPageObjects"
		//3.发送异步请求处理相应结果
// 		$.getJSON(url,params,function(result){
// 			doHandleQueryResponseResult();//处理响应结果
// 		})
		//如上代码的简写方式
		$.getJSON(url,params,doHandleQueryResponseResult);
	}
	//处理查询结果
	function doHandleQueryResponseResult(result){
		if(result.state == 1){
			doSetTableBodyRows(result.data.records);
			doSetPagination(result.data)//result.data 对应服务端业务成的PageObject
			
			//更新thead中checkbox的值(目的在处理分页查询事件时加入有全选也更新)
			$("#checkAll").prop("checked",false)
			
		}else{
			alert(result.message)
		}
	}
	//更新table对象的
	function doSetTableBodyRows(records){
		//1.获取table对象,并清空对象内容
		var tBody=$("#tbodyId");
		tBody.empty();
		records.forEach((item)=>tBody.append(doCreateRows(item)));
	}
	//基于对象创建行tr对象
	function doCreateRows(item){
     return `<tr>
          <td><input type='checkbox' value=${item.id}></td>
          <td>${item.username}</td>
          <td>${item.operation}</td>
          <td>${item.method}</td>
          <td>${item.params}</td>
          <td>${item.ip}</td>
          <td>${item.time}</td>
          </tr>`;
    }
	
	
	
</script>






